<template>
  <div ref="editorRef"
       @input="changeContent"></div>
  <!-- <div ref="editorRef"
       @input="changeContent"></div> -->
</template>

<script>
// 引入第三方编辑器
import E from 'wangeditor'
export default {
  props: {
    value: {
      type: String
    }
  },
  methods: {
    // 初始化编辑器
    initEditor () {
      const editor = new E(this.$refs.editorRef)

      // 绑定change事件， 就能知道什么时候内容发生了变化
      editor.config.onchange = (newHtml) => {
        this.$emit('input', newHtml)
        console.log('change 之后最新的 html', newHtml)
      }

      editor.create()
      editor.txt.html(this.value)

      this.$watch('value', () => {
        editor.txt.html(this.value)
      })
    },
    // changeContent (newContent) {
    //   this.content = newContent
    // }
  },
  // 在页面渲染编辑器
  mounted () {
    this.initEditor()
  }
}
</script>